<template>
	<view class="page">
		<myNavBar title="我的"></myNavBar>
		<view class="mine">
			<view class="content" v-if="userInfo">
				<head-image :name="userInfo.nickName" :url="userInfo.headImage" :size="120"></head-image>
				<view class="info-item">
					<view class="info-primary">
						<text class="info-username">
							{{userInfo.userName}}
						</text>
						<text v-show="userInfo.sex==0" class="iconfont icon-man" color="darkblue"></text>
						<text v-show="userInfo.sex==1" class="iconfont icon-girl" color="darkred"></text>
					</view>
					<text>
						手机号 ：{{userInfo.nickName}}
					</text>
				</view>
				<view v-if="userInfo.realauth == null" class="topRight topRight1">
					已认证
				</view>
				<view v-else class="topRight" @click="onRealAuth()">
					未认证
				</view>
			</view>
			<view class="myitem" @click="onModifyInfo()">
				<view class="myileft">
					<image src="../../static/image/info.png" mode=""></image>
					<text>个人信息</text>
				</view>
				<view class="info-arrow">
					<image src="../../static/image/arrow.png" mode=""></image>
				</view>
			</view>
			<view class="myitem">
				<view class="myileft">
					<image src="../../static/image/vip.png" mode=""></image>
					<text>高级VIP</text>
				</view>
				<view class="info-arrow">
					<image src="../../static/image/arrow.png" mode=""></image>
				</view>
			</view>
			<view class="myitem">
				<view class="myileft">
					<image src="../../static/image/record.png" mode=""></image>
					<text>交易记录</text>
				</view>
				<view class="info-arrow">
					<image src="../../static/image/arrow.png" mode=""></image>
				</view>
			</view>
			<view class="myitem" @click="onModifyPassword()">
				<view class="myileft">
					<image src="../../static/image/reset.png" mode=""></image>
					<text>重置密码</text>
				</view>
				<view class="info-arrow">
					<image src="../../static/image/arrow.png" mode=""></image>
				</view>
			</view>
			<view class="btn-group">
				<button class="btn" type="primary" @click="onQuit()">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
			}
		},
		onShow() {
			console.log('lowyer======================>',uni.getStorageSync("lowyer"));
			this.getUserInfo();
		},
		methods: {
			onRealAuth() {
				console.log('onRealAuth======================>');
				uni.navigateTo({
					url: `/pages/mine/realauth?id=${this.userInfo.userId}&realauth=${this.userInfo.realauth}&lowyerCard=${this.userInfo.lowyerCard}`
				})
			},
			getUserInfo() {
				this.$httpRequest({
					url: `/lawyer/lawyerInfo/${uni.getStorageSync("lowyer")}`,
					method: 'GET'
				}).then(res => {
					console.log("个人信息======================>", res);
					if(res.code == 200) {
						this.userInfo = res.data;
					}
				})
			},
			onModifyInfo() {
				uni.navigateTo({
					url: "/pages/mine/mine-edit"
				})
			},
			onModifyPassword() {
				uni.navigateTo({
					url: "/pages/login/resetPWD/resetPWD"
				})
			},
			onQuit() {
				uni.showModal({
					title: '确认退出?',
					success: (res) => {
						if (res.confirm) {
							getApp().exit()
						}
					}
				});
			}
		},
		computed: {
			// userInfo() {
			// 	return this.$store.state.userStore.userInfo;
			// }
		}


	}
</script>

<style scoped lang="scss">
	.mine {
		padding: 30rpx;

		.content {
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.info-item {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding-left: 40rpx;
				flex: 1;

				.info-primary {
					display: flex;
					align-items: center;

					.info-username {
						font-size: 40rpx;
						font-weight: 600;
					}

					.icon-man {
						color: darkblue;
					}

					.icon-girl {
						color: darkred;
					}
				}
			}


		}

		.btn-group {
			margin: 100rpx;

			.btn {
				margin-top: 20rpx;
			}

		}
	}

	.info-arrow {
		width: 50rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		& image {
			width: 30rpx;
			height: 30rpx;
		}
	}


	.myitem {
		border-radius: 10px;
		width: 100%;
		background-color: #fff;
		margin-top: 15rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		display: flex;
		align-items: center;

		.myileft {
			flex: 1;
			display: flex;
			align-items: center;

			& image {
				width: 60rpx;
				height: 60rpx;
				margin: 0 15rpx;
			}

			& text {}
		}
	}

	.topRight {
		font-size: 30rpx;
		background-color: red;
		padding: 10rpx 20rpx;
		border-radius: 10px;
		color: white;
	}
	.topRight1 {
		background-color: #2979ff;
	}
</style>